<template>
  <div>
    <div v-if="isInChildren">
      <van-icon name="qr" />
      <!-- <JsBarcode v-if="codeType === 'barcode'" :value="value" widthStyleObj="width: 26px;" style="height: 20px; width: 26px;"/>
      <QRcode v-else :content="value" :height="20" :width="20" /> -->
    </div>
    <div v-else class="content-box" @click.stop="switchPopup(true)">
      <div>
        <van-icon name="qr" />
        <van-icon v-if="!disabledOrReadonly" name="arrow"/>
      </div>
    </div>
    <van-popup v-model="show" round style="padding: 10px;">
      <div v-if="isEmpty" class="empty" >
        无效条码
      </div>
      <JsBarcode v-else-if="codeType === 'barcode'" :value="value" widthStyleObj="width: 160px;" style="height: 120px; width: 160px;"/>
      <QRcode v-else :content="value" :height="160" :width="160" />
    </van-popup>
  </div>
</template>
<script>
import JsBarcode from './jsBarcode.vue'
import QRcode from './QRcode.vue'
export default {
  name: 'barcode',
  components: {
    JsBarcode,
    QRcode
  },
  props: {
    value: {},
    codeType: {
      Type: String,
      default: ''
    },
    isInChildren: {
      type: Boolean,
      default: false
    },
    mode: {
      default: 'edit' // 编辑模式和 edit， 展示模式 view
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    isEmpty() {
      return !this.value && this.value !== '0' || !this.codeType
    },
    disabledOrReadonly(){
      return this.$attrs.readonly || this.$attrs.disabled
    }
  },
  methods: {
    switchPopup(status) {
      this.show = status
    },
  }
}
</script>
<style lang="scss" scoped>
  .empty {
    line-height: 28px;
    background-color: #f5f5f5;
    height: 80px;
    width: 160px;
    padding-top: 40px;
    text-align: center;
    color: #c8c9cc;
    border-radius: 16px;
  }
  .btn_history {
    margin-left: 20px;
    margin-top: 7px;
    color: #999;
  }
</style>